{% extends "nomenclature/base.html" %}

{% load staticfiles %}

{% block header %}
    <link rel="stylesheet" href="{% static "js/SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css" %}"
          type="text/css"/>
    <link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}" type="text/css"/>
{#    <link rel="stylesheet" href="{% static "css/bootstrap-theme.min.css" %}" type="text/css"/>#}
    <link rel="stylesheet" href="{% static "js/SlickGrid/slick.grid.css" %}" type="text/css"/>
    <link rel="stylesheet" href="{% static "js/SlickGrid/slick-default-theme.css" %}" type="text/css"/>
    <link rel="stylesheet" href="{% static "css/base.css" %}" type="text/css"/>

    <script src="{% static "js/SlickGrid/lib/jquery-1.7.min.js" %}"></script>
    <script src="{% static "js/SlickGrid/lib/jquery.event.drag-2.2.js" %}"></script>
    <script src="{% static "js/SlickGrid/lib/jquery-ui-1.8.16.custom.min.js" %}"></script>

    <script src="{% static "js/bootstrap.min.js" %}"></script>

    <script src="{% static "js/SlickGrid/slick.core.js" %}"></script>
    <script src="{% static "js/SlickGrid/slick.grid.js" %}"></script>
{% endblock %}

{% block content %}
    <div style="margin:10px;">
        <h2 class="page-header">{{ page_title|default:"Ati uitat sa numiti aceasta pagina!" }}</h2>

        <p class="text-left"><strong>Nomenclatorul ePharma</strong> controleaza nomenclatura din domeniul aplicatiei,
            care este impartita in diferite categorii.</p>

        <ul class="list-inline">
            <li>Categorie:</li>
            <li>
                <select id="nomCategorySelect">
                    <option></option>
                    {% for opt in nomenclature_categories %}
                        <option value="{{ opt.value }}" info="{{ opt.info }}">{{ opt.text }}</option>
                    {% endfor %}
                </select>
            </li>
        </ul>

        <ul class="list-inline">
            <li>Info:</li>
            <li><p id="nomCategoryInfo" class="text-left">Nu ati ales nici o categorie...</p></li>
        </ul>

        <div id="nomGrid" style="min-height: 20em;"></div>
    </div>

    <script src="{% static "js/nomenclature_home.js" %}"></script>
    <script>
        CreateDummyGrid();

        $(function () {
            console.log("Document ready!")

            var nomCategorySelect = $("select#nomCategorySelect");

            $(nomCategorySelect).change(function (s, eventObj) {
                console.log("nomCategorySelect change event fired");
                var selectedOption = $(nomCategorySelect).find("option:selected");
                $("p#nomCategoryInfo").text(selectedOption.attr('info') || "Nu ati ales nici o categorie...");
            });
        });
    </script>
{% endblock %}